<template>
  <div class="product">
    <n-form label-placement="left" :model="formData">
      <n-row :gutter="24">
        <n-col :span="5">
          <n-form-item label="商品名称">
            <n-input placeholder="请输入商品名称" v-model:value="formData.product_name"></n-input>
          </n-form-item>
        </n-col>
        <n-col :span="4">
          <n-form-item label="商品推荐">
            <n-select v-model:value="formData.hot" :options="productSelectHot"></n-select>
          </n-form-item>
        </n-col>
        <n-col :span="5">
          <n-form-item>
            <n-space>
              <n-button type="info" @click="handleSearch">查询</n-button>
              <n-button @click="handleReset">重置</n-button>
            </n-space>
          </n-form-item>
        </n-col>
      </n-row>
    </n-form>
    <n-space>
      <n-button type="info" @click="handleAdd">添加</n-button>
    </n-space>
    <br/>
    <n-data-table
        size="small"
        remote
        :columns="columns"
        :data="list"
    ></n-data-table>
    <ProductModal ref="modal" @list="getList"></ProductModal>
    <ProductModalImg ref="img"></ProductModalImg>
    <ProductDiscountModal ref="discount" @list="getList"></ProductDiscountModal>
  </div>
</template>

<script lang="ts">
export default {
  name: "product"
}
</script>

<script setup lang="ts">
import {onMounted, reactive, ref, h, nextTick} from "vue"
import {ums_product_delete, ums_product_isHot, ums_product_list} from '@/api/sms'
import useSystem from '@/hooks/useSystem'
import ProductModal from '@/view/shopping/product/ProductModal.vue'
import {
  productColumns,
  ProductFormType,
  productListType,
  productSelectHot,
  ProductUpdateType
} from '@/view/shopping/product/productType'
import url from '@/static/config'
import ProductModalImg from '@/view/shopping/product/ProductModalImg.vue'
import {NButton, NSpace} from 'naive-ui'
import {useRouter} from 'vue-router'
import ProductDiscountModal from '@/view/shopping/product/ProductDiscountModal.vue'

const router = useRouter()

const {pagination, list, success, error} = useSystem<productListType[]>(getList)

const formData = reactive<ProductFormType>({
  hot: '',
  product_name: '',
})

const img = ref<{
  init: (url: string) => void
}>()

const discount = ref<{
  init: (product_id: string, discount: number) => void
}>()

const columns = productColumns((row:productListType, key) => {
  if (key === 'product_pic') {
    return h('img', {
      src: url + "static/product/" + row[key],
      width: 80,
      height: 80,
      style: {
        cursor: "pointer"
      },
      onclick: () => {
        img.value?.init(url + "static/product/" + row[key])
      }
    }, '')
  }
  if (key === 'product_id') {
    return h("div", {
      style: {
        display: 'flex',
        justifyContent: 'center'
      }
    }, h(NSpace, {}, [
      h(NButton, {
        onClick: () => {
          ums_product_isHot({
            product_id: row.product_id,
            hot: row.hot === '0' ? '1': '0'
          }).then(res => {
            if (res.code === 200) {
              success(res.message)
              getList()
            } else {
              error(res.message)
            }
          })
        }
      }, row.hot === '0' ? '推荐' : row.hot === '1' ? '取消推荐' : ''),
      h(NButton, {
        type: "primary",
        onClick: () => {
          discount.value?.init(row.product_id,  row.discount || 0)
        }
      }, "折扣"),
      h(NButton, {
        type: 'info',
        onClick: () => {
          router.push({
            path: "product/edit",
            query: {
              product_id: row.product_id,
            }
          })
        }
      },'编辑'),
      h(NButton,{
        type: 'error',
        onClick: () => {
          ums_product_delete({
            product_id: row.product_id
          }).then(res => {
            if (res.code === 200) {
              success(res.message)
              getList()
            } else {
              error(res.message)
            }
          })
        }
      }, '删除')
    ]))
  }
})

const modal = ref<{
  init: (data?: ProductUpdateType) => void
}>()

function getList () {
  ums_product_list({
    pageSize: pagination.pageSize,
    current: pagination.page,
    data: formData
  }).then(res => {
    pagination.itemCount = res.data.total
    pagination.pageSize = res.data.pageSize
    pagination.page = res.data.current
    list.value = res.data.list
  })
}

const handleAdd = () => {
  modal.value?.init()
}

const handleSearch = () => {
  pagination.page = 1
  getList()
}

const handleReset = () => {
  pagination.page = 1
  let key: keyof ProductFormType
  for (key in formData) {
    formData[key] = ""
  }
  nextTick(() => {
    getList()
  })
}

onMounted( () => {
  getList()
} )
</script>

<style scoped lang="scss">
/*div{
  display: flex;
  justify-content: center;
}*/
</style>
